/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import {View, Text, Image, StyleSheet, TouchableOpacity} from 'react-native';
import {useBreakpointValue} from '@hadss/react_native_adaptive_layout/src/hooks/useBreakpointValue';
import {PlayListPage} from '../../util/constants.tsx';

const PlaylistHeader: React.FC = () => {
  let paddingHorizontal = useBreakpointValue({
    base: 16,
    sm: 16,
    md: 24,
  });

  return (
    <View>
      <View style={styles.playlistInfo}>
        <View
          style={{flexDirection: 'row', paddingHorizontal: paddingHorizontal}}>
          <Image
            source={require('../../../../asset/back.png')}
            style={styles.backButton}
          />
          <Text style={styles.collectionMusic}>收藏</Text>
        </View>

        <View style={styles.flexStyle} />
        <View style={styles.seachOut}>
          <Image
            source={require('../../../../asset/seachIcon.svg')}
            style={styles.seachIcon}
          />
        </View>
      </View>
      <View
        style={[styles.playlistInfo, {paddingHorizontal: paddingHorizontal}]}>
        {PlayListPage.optionsBtn.map((item, index) => (
          <View key={index}>
            <View
              style={[
                styles.customButton,
                {
                  backgroundColor:
                    index == 0 ? 'rgb(255, 25, 73)' : 'rgb(255, 255, 255)',
                },
              ]}>
              <Text
                style={[
                  styles.buttonText,
                  {
                    color:
                      index == 0 ? 'rgb(255, 255, 255)' : 'rgba(0, 0, 0, 0.6)',
                  },
                ]}>
                {item.name}
              </Text>
            </View>
          </View>
        ))}
      </View>
      <View style={[styles.listHeader, {paddingHorizontal: paddingHorizontal}]}>
        <Image
          source={require('../../../../asset/play_icon.svg')}
          style={styles.listHeaderImage}
        />
        <Text style={styles.listHeaderText}>{'播放全部'}</Text>
        <View style={styles.flexStyle} />
        <Image
          source={require('../../../../asset/allData.png')}
          style={styles.openIcon}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  backButton: {
    marginTop: 8,
    width: 40,
    height: 40,
    marginBottom: 15,
  },
  seachIcon: {
    width: 20,
    height: 20,
  },
  seachOut: {
    borderRadius: 24,
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
    height: 40,
    lineHeight: 40,
    padding: 10,
    right: 24,
    top: 8,
  },
  playlistInfo: {
    flexDirection: 'row',
  },
  listHeader: {
    height: 48,
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    backgroundColor: 'rgb(239, 239, 239)',
  },
  listHeaderImage: {
    width: 32,
    height: 32,
  },
  listHeaderText: {
    left: 8,
    fontSize: 18,
    color: 'rgba(0, 0, 0, 0.9)',
    fontWeight: '700',
    lineHeight: 24,
  },
  openIcon: {
    width: 20,
    height: 20,
    right: 0,
  },
  customButton: {
    width: 98,
    height: 36,
    padding: 10,
    borderRadius: 18,
    marginRight: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
  collectionMusic: {
    color: 'rgba(0, 0, 0, 0.9)',
    fontWeight: '700',
    fontSize: 20,
    marginTop: 18,
    marginLeft: 8,
  },
  buttonText: {
    color: 'rgba(0, 0, 0, 0.9)',
  },
  flexStyle: {
    flex: 1,
  },
});

export default PlaylistHeader;
